<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Countdown Test</title>
        <style type="text/css" media="screen">
            body {
                font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
            }
            body * {
                font-size: 16px;
                font-weight: normal;
            }
            div, h1 {
                margin: 30px;
            }
            h1 {
                font-weight: bold;
                margin-left: 10px;
            }
            h2 {
                font-style: italic;
                color: grey;
                margin: 10px 0 -10px 40px;
            }
            .countdown {
                display: block;
            }
            .countdown .item {
                padding: 10px;
            }
            .countdown .label {
                padding: 0 0 0 5px;
            }
            time:not(.countdown) {
                border: 10px solid red;
            }
            #generated-markup {
                margin-left: 40px;
            }
        </style>
    </head>
    <body>

        <!--
        Generated markup
        -->

        <h1>Generated markup</h1>

        <time id="generated-markup" class="countdown" datetime="P12DT05H16M22S">
            <span class="countdown-item">
                <span class="countdown-dd">12</span>
                <span class="countdown-label">days</span>
            </span>
            <span class="countdown-separator">:</span>
            <span class="countdown-item">
                <span class="countdown-hh">0</span><span class="countdown-hh">5</span>
                <span class="countdown-label">hours</span>
            </span>
            <span class="countdown-separator">:</span>
            <span class="countdown-item">
                <span class="countdown-mm">1</span><span class="countdown-mm">6</span>
                <span class="countdown-label">minutes</span>
            </span>
            <span class="countdown-separator">:</span>
            <span class="countdown-item">
                <span class="countdown-ss">2</span><span class="countdown-ss">2</span>
                <span class="countdown-label">seconds</span>
            </span>
        </time>

        <br>


        <!--
        A <time> datetime attribute with a valid global date and time string, time string or duration string
        -->

        <hr>

        <h1>Datetime attribute</h1>

        <h2>2020-12-13T17:43:00</h2>

        <div>
            <time datetime="2020-12-13T17:43:00">Friday, December 13th, 2020 5:43pm</time>
        </div>

        <h2>02:30:30</h2>
        <div>
            <time datetime="02:30:30">Expires in 2 hours 30 minutes 30 seconds</time>
        </div>

        <h2>P61D</h2>
        <div>
            <time datetime="P61D">61 days</time>
        </div>


        <!--
        Valid global date and time string with TZ
        https://html.spec.whatwg.org/multipage/semantics.html#the-time-element
        -->

        <hr>

        <h1>Valid global date and time string</h1>

        <h2>Paris (summer) 2020-05-06T21:00:00+0200</h2>
        <div><time>2020-05-06T21:00:00+0200</time></div><!-- Paris (summer) -->

        <h2>California (summer) 2020-05-06T12:00:00-0700</h2>
        <div><time>2020-05-06T12:00:00-0700</time></div><!-- California (summer) -->

        <hr>

        <h2>Paris (winter) 2020-12-08T17:47:00+0100</h2>
        <div><time>2020-12-08T17:47:00+0100</time></div><!-- Paris (winter) -->

        <h2>California (winter) 2020-12-08T08:47:00-0800</h2>
        <div><time>2020-12-08T08:47:00-0800</time></div><!-- California (winter) -->

        <h2>UTC 2020-12-08T16:47:00+0000</h2>
        <div><time>2020-12-08T16:47:00+0000</time></div><!-- UTC -->

        <h2>UTC 2020-12-08T16:47:00Z</h2>
        <div><time>2020-12-08T16:47:00Z</time></div><!-- UTC -->

        <hr>


        <!--
        Valid global date and time string
        -->

        <h2>2020-11-12T14:54Z</h2>
        <div><time>2020-11-12T14:54Z</time></div>

        <h2>2020-11-12T14:54:39Z</h2>
        <div><time>2020-11-12T14:54:39Z</time></div>

        <h2>2020-11-12T14:54:39.929Z</h2>
        <div><time>2020-11-12T14:54:39.929Z</time></div>

        <h2>2020-11-12T14:54+0000</h2>
        <div><time>2020-11-12T14:54+0000</time></div>

        <h2>2020-11-12T14:54:39+0000</h2>
        <div><time>2020-11-12T14:54:39+0000</time></div>

        <h2>2020-11-12T14:54:39.929+0000</h2>
        <div><time>2020-11-12T14:54:39.929+0000</time></div>

        <h2>2020-11-12T14:54+00:00</h2>
        <div><time>2020-11-12T14:54+00:00</time></div>

        <h2>2020-11-12T14:54:39+00:00</h2>
        <div><time>2020-11-12T14:54:39+00:00</time></div>

        <h2>2020-11-12T14:54:39.929+00:00</h2>
        <div><time>2020-11-12T14:54:39.929+00:00</time></div>

        <h2>2020-11-12T06:54-0800</h2>
        <div><time>2020-11-12T06:54-0800</time></div>

        <h2>2020-11-12T06:54:39-0800</h2>
        <div><time>2020-11-12T06:54:39-0800</time></div>

        <h2>2020-11-12T06:54:39.929-0800</h2>
        <div><time>2020-11-12T06:54:39.929-0800</time></div>

        <h2>2020-11-12T06:54-08:00</h2>
        <div><time>2020-11-12T06:54-08:00</time></div>

        <h2>2020-11-12T06:54:39-08:00</h2>
        <div><time>2020-11-12T06:54:39-08:00</time></div>

        <h2>2020-11-12T06:54:39.929-08:00</h2>
        <div><time>2020-11-12T06:54:39.929-08:00</time></div>

        <h2>2020-11-12 14:54Z</h2>
        <div><time>2020-11-12 14:54Z</time></div>

        <h2>2020-11-12 14:54:39Z</h2>
        <div><time>2020-11-12 14:54:39Z</time></div>

        <h2>2020-11-12 14:54:39.929Z</h2>
        <div><time>2020-11-12 14:54:39.929Z</time></div>

        <h2>2020-11-12 14:54+0000</h2>
        <div><time>2020-11-12 14:54+0000</time></div>

        <h2>2020-11-12 14:54:39+0000</h2>
        <div><time>2020-11-12 14:54:39+0000</time></div>

        <h2>2020-11-12 14:54:39.929+0000</h2>
        <div><time>2020-11-12 14:54:39.929+0000</time></div>

        <h2>2020-11-12 14:54+00:00</h2>
        <div><time>2020-11-12 14:54+00:00</time></div>

        <h2>2020-11-12 14:54:39+00:00</h2>
        <div><time>2020-11-12 14:54:39+00:00</time></div>

        <h2>2020-11-12 14:54:39.929+00:00</h2>
        <div><time>2020-11-12 14:54:39.929+00:00</time></div>

        <h2>2020-11-12 06:54-0800</h2>
        <div><time>2020-11-12 06:54-0800</time></div>

        <h2>2020-11-12 06:54:39-0800</h2>
        <div><time>2020-11-12 06:54:39-0800</time></div>

        <h2>2020-11-12 06:54:39.929-0800</h2>
        <div><time>2020-11-12 06:54:39.929-0800</time></div>

        <h2>2020-11-12 06:54-08:00</h2>
        <div><time>2020-11-12 06:54-08:00</time></div>

        <h2>2020-11-12 06:54:39-08:00</h2>
        <div><time>2020-11-12 06:54:39-08:00</time></div>

        <h2>2020-11-12 06:54:39.929-08:00</h2>
        <div><time>2020-11-12 06:54:39.929-08:00</time></div>


        <!--
        Valid time string
        https://html.spec.whatwg.org/multipage/infrastructure.html#valid-time-string
        -->

        <hr>

        <h1>Valid time string</h1>

        <h2>12:30</h2>
        <div><time>12:30</time></div>

        <h2>12:30:39</h2>
        <div><time>12:30:39</time></div>

        <h2>12:30:39.929</h2>
        <div><time>12:30:39.929</time></div>


        <!--
        Valid duration string
        https://html.spec.whatwg.org/multipage/infrastructure.html#valid-duration-string
        -->

        <hr>

        <h1>Valid duration string</h1>

        <h2>PT00M10S</h2>
        <div><time>PT00M10S</time></div>

        <h2>PT01H01M15S</h2>
        <div><time>PT01H01M15S</time></div>

        <h2>P2DT20H20M20S</h2>
        <div><time>P2DT20H20M20S</time></div>

        <h2>P2DT20H20M</h2>
        <div><time>P2DT20H20M</time></div>

        <h2>P2DT20H</h2>
        <div><time>P2DT20H</time></div>

        <h2>P2D</h2>
        <div><time>P2D</time></div>

        <h2>PT20H20M20S</h2>
        <div><time>PT20H20M20S</time></div>

        <h2>PT20M20S</h2>
        <div><time>PT20M20S</time></div>

        <h2>PT20S</h2>
        <div><time>PT20S</time></div>


        <!--
        JavaScript Date.parse() parsable string
        new Date("December 20, 2020 10:24:00").toDateString() => Sat Dec 20 2020
        new Date("December 20, 2020 10:24:00").toGMTString() => Sat, 20 Dec 2020 09:24:00 GMT
        new Date("December 20, 2020 10:24:00").toISOString() => 2020-12-20T09:24:00.000Z
        new Date("December 20, 2020 10:24:00").toUTCString() => Sat, 20 Dec 2020 09:24:00 GMT
        -->

        <hr>

        <h1>Date.parse()</h1>

        <h2>toDateString</h2>
        <div id="toDateString"></div>

        <h2>toGMTString</h2>
        <div id="toGMTString"></div>

        <h2>toISOString</h2>
        <div id="toISOString"></div>

        <h2>toUTCString</h2>
        <div id="toUTCString"></div>


        <!-- Python datetime.timedelta str output -->

        <hr>

        <h1>Timedelta</h1>

        <h2>600 days, 3:59:12</h2>
        <div>600 days, 3:59:12</div><!-- print datetime.timedelta(days=600, hours=3, minutes=59, seconds=12) -->

        <h2>00:59:00</h2>
        <div>00:59:00</div><!-- print datetime.timedelta(days=0, hours=0, minutes=59, seconds=0) -->

        <h2>3:59:12</h2>
        <div>3:59:12</div><!-- print datetime.timedelta(days=0, hours=3, minutes=59, seconds=12) -->


        <!-- Human readable duration -->

        <hr>

        <h1>Human readable</h1>

        <h2>24h00m59s</h2>
        <div>24h00m59s</div>

        <h2>2h 0m</h2>
        <div>2h 0m</div>

        <h2>4h 18m 3s</h2>
        <div>4h 18m 3s</div>

        <h2>600 days, 3:59:12</h2>
        <div>600 days, 3:59:12</div>

        <h2>600 jours, 3:59:12</h2>
        <div>600 jours, 3:59:12</div>

        <h2>00:01</h2>
        <div>00:01</div>

        <h2>240:00:59</h2>
        <div>240:00:59</div>


        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script>document.write('<script src="../jquery.countdown.js"><\/script>')</script>
        <script>
        window.jQuery(function ($) {

            "use strict";

            $("#toDateString").text(new Date("December 20, 2020 10:24:00").toDateString());
            $("#toGMTString").text(new Date("December 20, 2020 10:24:00").toGMTString());
            $("#toUTCString").text(new Date("December 20, 2020 10:24:00").toUTCString());
            if (Date.prototype.toISOString) {
                $("#toISOString").text(new Date("December 20, 2020 10:24:00").toISOString());
            }

            $('div, time').countDown();

        });
        </script>

    </body>
</html>
